<!DOCTYPE html><html>
<title> Limit Stick-Travel Demo </title>
<body>
<div id="help" style="position:fixed; left:40%; top:4%; color:grey;">
   virtualjoystick.js Limit Stick-Travel Demo
</div>

<div id="debug1" style="position:fixed; left:5%; top:4%; color:grey;">
   Debug Info 
</div>

<div id="debug2" style="position:fixed; left:5%; top:8%; color:grey;">
   Debug Info 
</div>

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://jeromeetienne.github.io/threex.keyboardstate/threex.keyboardstate.js"></script>
<script src="../virtualjoystick.js"></script> 
<script>
	var scene = new THREE.Scene();
	var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
	var clock = new THREE.Clock();

	var keyboard = new THREEx.KeyboardState();
	var joystick = new VirtualJoystick({
		mouseSupport	: true,
		limitStickTravel: true,
		stickRadius	: 50
	});

	var renderer = new THREE.WebGLRenderer();
	renderer.setSize(window.innerWidth, window.innerHeight);
	document.body.appendChild(renderer.domElement);
	window.addEventListener('resize', onWindowResize, false); 

	var cubeGeometry = new THREE.CubeGeometry(20,20,20);
	var cubeMaterial = new THREE.MeshLambertMaterial({ color: 'rgb(0,255,0)' });
	var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
	scene.add(cube);

	var sphereGeometry = new THREE.SphereGeometry(5);
	var sphereMaterial = new THREE.MeshBasicMaterial({ color: 'rgb(255,255,0)' });
	var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
	scene.add(sphere);

	var light = new THREE.PointLight( 'rgb(255,255,255)', 1, 0 );
	scene.add(light);

	var sunRiseFlag = true;
	var sunHeight = 0;
	var frameTime = 0;

	camera.position.y = 40;
	camera.position.z = 160;

	cube.rotation.x = 0.4;
	cube.rotation.y = 0.6;

	var debugText1 = document.getElementById("debug1");
	var debugText2 = document.getElementById("debug2");

	animate();

	function animate(){

		requestAnimationFrame(animate);

		frameTime = clock.getDelta();

		if(sunRiseFlag == true){
			sunHeight = sunHeight + 60 * frameTime;
		}

		if(sunRiseFlag == false){
			sunHeight = sunHeight - 60 * frameTime;
		}

		if(sunHeight > 150){
			sunHeight = 150;
			sunRiseFlag = false;
		}

		if(sunHeight < 0){
			sunHeight = 0;
			sunRiseFlag = true;
		}

		light.position.set(50,sunHeight,50);
		sphere.position = light.position;


		if( keyboard.pressed("D") ){
		cube.position.x = cube.position.x + 60 * frameTime;
		}
		if( keyboard.pressed("A") ){
		cube.position.x = cube.position.x - 60 * frameTime;
		}
		if( keyboard.pressed("W") ){
		cube.position.y = cube.position.y + 60 * frameTime;
		}
		if( keyboard.pressed("S") ){
		cube.position.y = cube.position.y - 60 * frameTime;
		}

		if( joystick.right() ){
		cube.position.x = cube.position.x + 60 * frameTime;    
		}
		if( joystick.left() ){
		cube.position.x = cube.position.x - 60 * frameTime;     
		}
		if( joystick.up() ){
		cube.position.y = cube.position.y + 60 * frameTime;       
		}
		if( joystick.down() ){
		cube.position.y = cube.position.y - 60 * frameTime;
		}

		renderer.render( scene, camera );

		debugText1.innerHTML = "Cube position X: " + cube.position.x.toFixed(1);
		debugText2.innerHTML = "Cube position Y: " + cube.position.y.toFixed(1);

	}


	function onWindowResize(){
		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();
		renderer.setSize( window.innerWidth, window.innerHeight );   
	}
      </script>     
   </body>
</html>
